<template>
  <div>
    <Header></Header>
    <footer id="fabNav" class="affix dock-bottom dock-left fab has-padding dock-auto shadow-none" v-show="!showToggle">
      <a id="tocBtn" class="btn circle primary_btn layer btn-lg" @click="chat"><i class="icon icon-pencil"></i></a>
    </footer>
    <section class="book-info-section mt-5">
      <div class="cover-img" :style="{ backgroundImage: 'url(' + img + ')', opacity: 0.3, filter: 'blur(1px)' }">
      </div>
      <div class="book-detail">
        <img :src=img class="book-cover fl">
        <div>
          <h3 class="col-auto">{{ data.name }}</h3>
          <a class="book-meta">{{ data.author }} <i class="icon-angle-right"></i></a>
        </div>
      </div>
      <div class="book-tap mt-1 ps-2">
        <div>
          <h2 class="rating ms-1" v-if = "data.count > 0"> {{ scores }} </h2>
          <div class="rating ms-1" v-for="(item, index) in starList" :key="index">
            <span class="star">
              <i v-if="item == 2" class="icon icon-star"></i>
              <i v-if="item == 1" class="icon icon-star-half"></i>
              <i v-if="item == 0" class="icon icon-star-empty"></i>
            </span>
            <!-- <span class="star">★</span><span class="star">☆</span> -->
          </div>
          <p class="font ms-1"> {{ data.count }}人评价 </p>
        </div>
        <div>
          <p class="font ms-3 bs-gray-200"> </p>
        </div>
        <div>
          <h2 class="rating ms-3"> {{ data.collection }} </h2>
          <b class="font">人</b>
          <p class="font ms-3"> 加书架 </p>
        </div>
        <div class="heart" @click="collect">
          <i v-if="collection == 0" class="icon icon-heart-empty"></i>
          <i v-else class="icon icon-heart"></i>
        </div>
      </div>
      <div class="white hstack px-2 margin-3">
        <span class="tap" v-for="(item, index) in data.taps" :key="index" @click="searchByTab(item)"> {{ item }} </span>
      </div>
      <div class="book-intro part">
        <p>{{ data.content }}</p>
      </div>
      <div class="book-menu menu-top" @click="jumpTo()">
        <span class="menu-title">目录</span><span class="menu-title">{{ data.update_time }} <i
            class="icon-angle-right"></i></span>
      </div>
      <div class="menu-top mt-2">
        <div class="mt-1 col-sm-4 discussion" v-for="(item, index) in discussion" :key="index"
          @click="jumpToDiscussion(item)">
          <div class="marginbox">
            <div class="between">
              <div class="name-box">
                <div class="img-box mt-1 ms-1"><img :src="item.imgbase64"></div>
                <div class="content">
                  <p>{{ item.username }}</p>
                  <p>{{ item.updatetime.substring(0, 4) == new Date().getFullYear()
                    ? item.updatetime.replace(/^[^-]*-|:[^:]*$/g, '')
                    : item.updatetime.replace(/:[^:]*$/g, '') }}</p>
                </div>
              </div>
              <div class="mt-2 me-2" v-if="item.userid == userid" @click.stop="delComment(item)"><i class="icon-times"></i></div>
            </div>
            <p class="mt-1 ms-1 mb-1 discussion-content">{{ item.ext }}</p>
            <p class="mb-1 text-end me-2"><i class="icon-chat-dot"></i> {{ item.messagecount }} &nbsp; <i
                @click.stop="thumbsUpComment(item)" class="icon-thumbs-o-up"></i> {{ item.hitsum }}</p>
            <p class="ms-2 underline"></p>
          </div>
        </div>
      </div>
    </section>
    <div class="input-box" v-show="showToggle">
      <button class="icon-button" @click="toggleMode"><i class="icon-caret-down"></i></button>
      <input class="text-input" v-model="content" placeholder="说点什么吧" />
      <button class="send-button" @click="sendContent"><i class="icon-location-arrow"></i></button>
    </div>
  </div>
</template>

<script>
import Header from './components/Header.vue'
export default {
  components: {
    Header
  },
  data() {
    return {
      content: '',
      data: this.$route.query,
      discussion: [],
      img: '',
      starList: [],
      scores: null,
      collection: 0,
      userid: this.$store.state.id,
      showToggle: false
    }
  },
  mounted() {
    this.initDisCussion()
    this.mark()
    this.img = this.getImg()
    this.getStarList()
    this.getCollection()
  },
  methods: {
    delComment(item) {
      this.post('delComment', {
        id: item.id
      }).then((response) => {
        if (response.data.code === 1) {
          this.initDisCussion()
        }
      })
    },
    thumbsUpComment(item) {
      this.post('thumbsUpComment', {
        id: item.id
      }).then((response) => {
        if (response.data.code === 1) {
          item.hitsum++
        }
      })
    },
    toggleMode() {
      this.showToggle = false
    },
    chat() {
      this.showToggle = true
    },
    sendContent() {
      this.post('addComment', {
        bookid: this.data.id,
        ext: this.content
      }).then((response) => {
        if (response.data.code === 1) {
          // 评论列表增加
          // this.discussion.push(response.data.data)
          this.discussion.unshift(response.data.data)
          this.content = ''
          this.showToggle = false
        }
      })
    },
    getCollection() {
      if (this.$store.state.collection.indexOf(this.data.id) > -1) {
        this.collection = 1
      }
    },
    collect() {
      if (this.collection === 0) {
        this.post('collect', {
          bookid: this.data.id
        }, { emulateJSON: true }).then((response) => {
          if (response.data.code === 1) {
            this.$store.commit('addCollection', this.data.id)
            this.collection = 1
          }
        })
      } else {
        this.post('unBookmark', {
          bookid: this.data.id
        }, { emulateJSON: true }).then((response) => {
          if (response.data.code === 1) {
            this.$store.commit('removeCollection', this.data.id)
            this.collection = 0
          }
        })
      }
    },
    getStarList() {
      let scores = this.data.star / this.data.count
      this.scores = scores.toFixed(1)
      for (let i = 0; i < 5; i++) {
        if (scores > 2) {
          this.starList.push(2)
          scores -= 2
        } else if (scores > 1) {
          this.starList.push(1)
          scores -= 1
        } else {
          this.starList.push(0)
        }
      }
    },
    jumpTo() {
      this.$router.push({ path: '/bookmenu', query: { id: this.data.id } })
    },
    getTimes() {
      return Math.trunc(Date.now() / 1000)
    },
    mark() {
      if (!this.isEmpty(this.$store.state.token)) {
        this.post('marks', {
          bookid: this.data.id,
          time: this.getTimes()
        }, { emulateJSON: true }).then((response) => {
          if (response.data.code === 0) {
            this.$store.commit('setLoginflag', '离线')
          } else if (response.data.data === 'true') {
            this.collection = 1
          }
        })
      }
    },
    getImg() {
      return this.data.imgurl ? this.data.imgurl : '/static/img/' + this.data.id + '.png'
    },
    jumpToDiscussion(target) {
      this.$store.commit('setDiscussion', target)
      this.$router.push({ path: '/discussion', query: { tab: '书评详细' } })
    },
    initDisCussion() {
      this.$http.post('api/qryComment', {
        pagesize: 5,
        pagenum: 1,
        id: this.data.id
      }, { emulateJSON: true }).then((response) => {
        this.discussion = response.data.data.list
      })
    },
    setbg(url) {
      return { background: url }
    },
    searchByTab(tab) {
      this.$router.push({ path: '/label', query: { tab: tab } })
    }
  }
}
</script>

<style lang='scss' scoped>
.between {
  display: flex;
  justify-content: space-between;
}

.icon-pencil {
  color: black !important;
}

.heart {
  position: absolute;
  right: 1rem;
}

.bs-gray-200 {
  background: #e9ecef !important;
  float: left;
  width: .5px;
  height: 1.6rem;
}

.font {
  margin: 0;
  font-size: .3rem;
}

.rating {
  display: inline;
}

.icon {
  color: #ffe400;
}

.cover-img {
  height: 10rem;
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
  margin-left: 0.25rem !important;
  margin-top: 0.7rem !important;
}

.discussion-content {
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.underline {
  border-bottom: 1px solid rgb(224, 222, 222);
  width: 95%;
}

.marginbox {
  margin: 0 .5rem 0 .25rem;
}

.name-box {
  display: flex;
}

.img-box {
  height: 90%;
  width: 3rem;
}

.discussion {
  min-height: 5rem;
}

.menu-top {
  margin: 0 .3rem 0 .3rem;
  border-radius: 0.5rem;
  background-color: white;
}

.margin-3 {
  margin: 0 .3rem 0 .3rem;
}

.tap {
  font-size: 0.7rem;
  margin: 0 0 0 .5rem;
  padding: .1rem .4rem .1rem .4rem;
  border-radius: .5rem;
  // background-color: transparent;
  background: #f8f9fa;
  opacity: 1;
}

.star {
  font-size: 0.8rem;
  color: #f7e34a;
}

.book-detail {
  // justify-content: space-between;
  position: absolute;
  top: 4rem;
  overflow: hidden;
  padding: 0 0.6rem;
  display: flex;
  z-index: 99;
}

.book-cover {
  display: inline-block;
  width: 6rem;
  height: 8rem;
  margin-right: 0.5rem;
  background-color: transparent;
}

.fl {
  float: left;
}

.book-detail .book-desc {
  position: relative;
}

.book-detail .book-desc .book-title {
  color: #333;
  // line-height: 1;
  margin: 0.2rem 0 0.3px;
  font-weight: 500;
  font-size: 1rem;
}

.book-detail .book-desc .book-meta {
  font-size: 0.8rem;
  line-height: 1rem;
  align-items: flex-end;
  white-space: normal;
}

.book-tap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  // text-align: center;
  padding: 0.6rem 0;
  border-top: 1px solid #ebebeb;
  margin: 0 .3rem 0 .3rem;
  border-radius: 0.5rem 0.5rem 0px 0px;
  background-color: white;
}

.book-tap .reader-item {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.book-tap .reader-item span.title {
  font-size: 12px;
  color: #999;
}

.book-tap .reader-item span {
  display: block;
  line-height: 1.5;
}

.book-intro {
  background-color: white;
  position: relative;
  padding: 0.4rem 0.9rem 0;
  margin: 0 .3rem 0 .3rem;
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  border-radius: 0 0 0.5rem 0.5rem;
}

.book-menu {
  position: relative;
  margin-top: 0.4rem;
  padding: 0 0.4rem;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

.menu-title {
  font-size: 0.8rem;
  line-height: 1.8rem;
  font-weight: 400;
  color: #333;
}

// .chapter-detail {
//     position: relative;
//     border-top: 1px solid #ebebeb;
//     border-bottom: 1px solid #ebebeb;
//     box-sizing: border-box;
//     overflow: hidden;
//     padding: 0 1.4rem;
// }

// .a-detail {
//     display: flex;
//     justify-content: space-between;
//     line-height: 1.5rem;
//     height: 1.5rem;
// }
</style>
